<template>
	<div class="container">
		<a-row :gutter="20" justify="end">
			<a-col :span="2" class="py-4 text-center">
				<a-space>
					<a-button @click="close()">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<h1 style="text-align: center;font-weight: bold;margin-bottom: 20px;">{{ planInfo.name }}详情</h1>
		<a-form>
			<div class="flex">
				<a-form-item label="项目名称" class="flex-auto">
					{{ planInfo.project?.name }}
				</a-form-item>
				<a-form-item label="计划名称" class="flex-auto">
					{{ planInfo.name }}
				</a-form-item>
			</div>
			<div class="flex">
				<a-form-item label="计划编号" class="flex-auto">
					{{ planInfo.code }}
				</a-form-item>
				<a-form-item label="附件" class="flex-auto">
					<p v-for="(item) in planInfo.file_path" :key="item.url">
						<a v-if="item.url" :href="item.url" target="_blank">{{ item.name }}</a>
					</p>
				</a-form-item>
			</div>
			<div>
				备注: {{ planInfo.memo }}
			</div>
		</a-form>

		<a-table :data-source="planInfo.materials" :columns="columns" :pagination="false">
		</a-table>
		<h2 style="margin-bottom: 12px;">总控计划的发起申请人</h2>
		<a-workflow v-if="planInfo.id" v-model:status="planInfo.workflow_status" module="planzz" :target-id="planInfo.id" :project-id="planInfo.project_id" :code="planInfo.code" :user-id="planInfo.opr_id" :extra="true" :steps="true" @submit="(e) => console.log(e)"></a-workflow>
		<a-row :gutter="20">
			<a-col :span="24" class="py-4 text-center">
				<a-space>
					<a-button @click="close()">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { inject, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { post } from "../utils";
import dayjs from "dayjs";
import { AWorkflow } from "@/components/index.js";
import { CloseOutlined } from "@ant-design/icons-vue";

const route = useRoute()
const router = useRouter()

const planInfo = ref([])
// 编辑主计划
post("plan/info", { id: route.params.id }).then(data => {
	data.materials = data.materials.map((d, i) => {
		d.key = i;

		const { unit, quantity, standard, add_time, use_time, useto, time_unit, memo } = d.PlanMaterial;
		d.unit = unit;
		d.quantity = quantity;
		d.standard = standard;
		d.add_time = add_time;
		d.use_time = use_time;
		d.time_unit = time_unit;
		d.useto = useto;
		d.memo = memo;
		return d;
	});

	data.file_path = data?.file_path ? JSON.parse(data.file_path) : [];
	planInfo.value = data
});

const columns = [
	{
		title: "ID",
		dataIndex: "key",
		width: 60,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text + 1;
		}
	},
	{
		title: "周转料名称",
		dataIndex: "name",
		width: 150,
		extra: 0
	},
	{
		title: "型号规格",
		dataIndex: "model",
		width: 150,
		extra: 0
	},
	{
		title: "质量标准技术要求",
		dataIndex: "standard",
		align: "center"
	},
	{
		title: "计量单位",
		dataIndex: "unit",
		align: "center"
	},
	{
		title: "需用数量",
		dataIndex: "quantity",
		align: "center"
	},
	{
		title: "计划进场时间",
		dataIndex: "add_time",
		width: 150,
		align: "center",
		customRender: ({ text }) => {
			return dayjs(text).format("YYYY-MM-DD HH:mm:ss");
		}
	},
	{
		title: "计划租赁时长",
		dataIndex: "use_time",
		width: 150,
		align: "center"
	},
	{
		title: "租赁时长单位",
		dataIndex: "time_unit",
		width: 120,
		align: "center"
	},
	{
		title: "备注",
		dataIndex: "memo",
		align: "center"
	},
];
const closeTab = inject("closeTab");
// 返回上个页面
function close() {
	router.go(-1)
}
</script>

<style scoped lang="scss">
.container {
	background-color: white;
	padding: 24px;
}
</style>
